<template>
    <div class="digital-album">
      <Slider></Slider>
      <div class="album-inner">
        <ul class="album-list">
          <li v-for="(albumList,index) in content" v-if="content[index].albumlist.length>=5">
            <div class="title">{{albumList.title?albumList.title:albumList.type}}</div>
            <ul class="info">
              <li v-for="(list,index) in albumList.albumlist" v-if="index<5">
                <div class="info-img" @click="toAlbumDetail(list.album_mid,list.album_id)">
                  <img :src="baseUrl+list.album_mid+'.jpg'" alt="">
                  <div class="icon">
                    <span class="iconfont icon-bofang1"></span>
                  </div>
                </div>
                <div class="info-title ellipsis">{{list.album_name}}</div>
                <div class="info-singer ellipsis">{{list.singer_name}}</div>
                <div class="info-sell">
                  <span>￥{{list.dis_price/100}}</span>
                  <span>立即购买</span>
                </div>
              </li>
            </ul>
          </li>
        </ul>
      </div>

    </div>
</template>

<script>
    import {mapState} from 'vuex'
    import Slider from '@/components/Slider/Slider'
    export default {
        name: "NumberEdition",
        data(){
          return{
            baseUrl:'http://y.gtimg.cn/music/photo_new/T002R300x300M000',
            content:[],
          }
        },
        methods:{
          toAlbumDetail(mid,id){
            this.$router.replace('/albumDetail/'+mid+'/'+id)
          }
        },
        components:{
          Slider
        },
        computed:{
          ...mapState(['digitalAlbumList'])
        },
        watch:{
          digitalAlbumList(value){
            this.content=value.content;
          }
        },
        mounted(){
          this.$store.dispatch('getDigitalAlbumList');
        }
    }
</script>

<style scoped lang="less">
.digital-album{
  .album-inner{
    background: linear-gradient(to bottom ,#f2f2f2 ,#fafafa);
    .album-list{
      width: 1200px;
      margin: 0 auto;
      padding: 30px 0px;
      .title{
        font-size: 24px;
        padding: 20px 0px;
      }
      .info{
        >li{
          display: inline-block;
          width: 224px;
          margin-right: 20px;
          font-size: 14px;
          .info-img{
            width: 224px;
            overflow: hidden;
            position: relative;
            &:hover {
              &:after{
                content: '';
                display: block;
                width: 224px;
                height: 224px;
                position: absolute;
                top:0;
                left: 0;
                background: #000;
                opacity: 0.2;
              }
              >img{
                transform: scale(1.2);
              }
              .icon{
                opacity: 1;
                transform: scale(1.3);
              }
            }
            .icon{
              position: absolute;
              z-index: 1;
              background: white;
              border-radius: 50%;
              height:40px;
              width: 40px;
              text-align: center;
              line-height: 40px;
              opacity: 0;
              transition: all 1s;
              top:40%;
              right: 0;
              left: 0;
              margin: 0 auto;
              .iconfont{
                font-size: 25px;
                color: #545454;
                margin-left: 4px;
                margin-top: 3px;
                display: inline-block;
              }
            }
            >img{
              width: 224px;
              transition: all 0.3s;

            }
          }
          .info-title{
            line-height: 2;
            &:hover{
              color: #31c27c;
              cursor: pointer;
            }
          }
          .info-singer{
            line-height: 1.5;
            color: #999;
            &:hover{
              color: #31c27c;
              cursor: pointer;
            }
          }
          .info-sell{
            line-height: 2;
            >span{
              display: inline-block;
              &:first-child{
                color: #999;
              }
              &:last-child{
                float: right;
                border: 1px solid #ccc;
                padding: 0px 5px;
                box-sizing: border-box;
                font-size: 12px;
                &:hover{
                  background: #ddd;
                }
              }
            }
          }
          &:last-child{
            margin-right: 0px;
          }
        }
      }
    }
  }
}
</style>
